<template>
  <div class="article bg-white">
    <!-- 标题 -->
    <h1 class="article-title">{{article.title}}</h1>
    <!-- 泰山号 -->
    <van-cell-group :border="false" v-if="article.bloger">
      <van-cell center class="tsline-bloger">
        <template slot="title">
          <span class="van-cell-text">{{article.bloger.name}}</span>
          <div class="subtitle">
            <span>{{article.time}}</span>
            <span class="hsbar">·</span>
            <span>{{article.bloger.description}}</span>
          </div>
        </template>
        <template slot="icon">
          <div class="user-avatar">
            <img :src="article.bloger.avatar" />
            <i class="vip"></i>
          </div>
        </template>
        <template slot="right-icon">
          <van-button size="small" type="danger">关注</van-button>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 内容详情 -->
    <div class="rtf-html van-hairline--bottom" v-html="article.content"></div>
    <!-- 点赞、不喜欢、打赏 -->
    <div class="flexbox article-actions">
      <div class="flexbox-item" v-if="article.reward">
        <van-button size="small">
          <van-icon name="purse" />赞赏
        </van-button>
      </div>
      <div class="flexbox-item">
        <van-button size="small" @click="onLike">
          <van-icon name="like-fill" v-show="this.article.liked" />
          <van-icon name="like" v-show="!this.article.liked" />
          {{this.article.stats.likes}}
        </van-button>
      </div>
      <div class="flexbox-item">
        <van-button size="small">
          <van-icon name="trash" />不喜欢
        </van-button>
      </div>
    </div>
    <!-- 广告 -->
    <!-- 推荐文章 -->
    <!-- 评论 -->
    <van-list
      v-model="loading"
      :finished="finished"
      @load="onLoadComments"
      class="comment-list"
      id="article-comment-list"
    >
      <van-cell
        class="tsline-bloger comment-item"
        :clickable="actived"
        :border="false"
        v-for="item in list"
        :key="item.id"
        @click="onView"
      >
        <template slot="title">
          <span class="van-cell-text">{{article.bloger.name}}</span>
          <div class="subtitle">
            <span>{{article.time}}</span>
            <span class="hsbar">·</span>
            <span>{{article.bloger.description}}</span>
          </div>
          <div class="comment-content">{{item.title}}</div>
          <div class="comment-state">
            <span>{{article.time}}</span>
            <span class="hsbar">·</span>
            <span>回复</span>
          </div>
        </template>
        <template slot="icon">
          <div class="user-avatar">
            <img :src="article.bloger.avatar" />
            <i class="vip"></i>
          </div>
        </template>
        <template slot="right-icon">
          <van-button size="small" @click.stop="onShow">
            <van-icon name="like" />20
          </van-button>
        </template>
        <ul class="comment-inners">
          <li>
            <span>鲁能太扇</span>
            ：内部评论列表楼中楼
          </li>
          <li>
            <span>查看全部10条回复</span>
          </li>
        </ul>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
import { Tag, Col, Icon, Cell, CellGroup, Button, List } from 'vant'
import {
  refreshCommentList,
  setCommentCount,
  scrollToCommentList
} from '../../common/hybrid.js'
import { scroller } from 'vue-scrollto/src/scrollTo'

export default {
  components: {
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [List.name]: List
  },
  data () {
    return {
      actived: true,
      time: 0,
      liked: true,
      cacheDuration: 30000,
      article: {},
      //
      list: [],
      loading: false,
      finished: false,
      count: 0,
      isLoading: false,
      show: false,
      visible: false,
      meta: {
        totalCount: 0,
        pageCount: 0,
        currentPage: 0,
        perPage: 0
      },
      formats: [
        'tsline-text',
        'tsline-thumb',
        'tsline-banner',
        'tsline-gralley'
      ]
    }
  },

  created: function () {
    console.log('-------created--------')
    refreshCommentList(() => {
      // 在此处刷新评论列表
    })
    // 设置评论数量
    setCommentCount(100)
    // 监听原生点击评论数量按钮的动作
    scrollToCommentList(() => {
      this.go2CommentList()
    })
  },
  mounted: function () {
    console.log('--------mounted-------')
  },
  activated: function () {
    let aid = this.$route.params.id
    let currentTime = new Date().getTime()

    if (
      this.$store.state.tslineArticleCurrentId !== aid ||
      currentTime - this.time > this.cacheDuration
    ) {
      console.log('--------onLoad-------')
      this.onLoad(aid, currentTime)
    }
  },
  methods: {
    onShow () {
      this.actived = false
    },
    onView () {
      this.actived = true
    },
    onLike () {
      this.axios
        .post('/tsline/extend/like', { article_id: this.article.id })
        .then(response => {
          this.article.liked = response.data
          if (this.article.liked) {
            this.article.stats.likes = Number(this.article.stats.likes) + 1
          } else {
            this.article.stats.likes = Number(this.article.stats.likes) - 1
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onLoad (id, currentTime) {
      let cacheArticle = this.$store.state.tslineArticle.filter(function (
        item,
        index,
        self
      ) {
        if (item.id !== id) {
          return false
        }
        if (item.expired_at < currentTime) {
          self.splice(index, 1)
          return false
        }
        return true
      })

      if (cacheArticle[0]) {
        this.article = cacheArticle[0]
      } else {
        this.axios
          .get('/tsline/article/view', {
            params: { id: this.$route.params.id },
            headers: { FastMode: true }
          })
          .then(response => {
            this.article = response.data
            this.time = currentTime
            this.article.expired_at = currentTime + this.cacheDuration
            this.$store.state.tslineArticle.push(this.article)
          })
          .catch(function (error) {
            console.log(error)
          })
      }
    },
    onLoadComments () {
      let page = this.meta.currentPage + 1
      this.axios
        .get('/tsline/comment', {
          params: { id: this.$route.params.id, page: page },
          headers: { FastMode: true }
        })
        .then(response => {
          let data = response.data
          let itemCount = data.items.length
          if (itemCount > 0) {
            this.list = this.list.concat(data.items)
          }
          this.meta = data.meta
          this.loading = false
          if (this.meta.pageCount <= this.meta.currentPage || itemCount <= 0) {
            this.finished = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    onClick (id) {
      this.$router.push({ name: 'tsline/article/:id', params: { id: id } })
    },
    arrayUnique (arr) {
      let result = []
      let hash = {}
      for (let i = 0, elem; (elem = arr[i]) != null; i++) {
        if (!hash[elem.id]) {
          result.push(elem)
          hash[elem.id] = true
        }
      }
      return result
    },
    go2CommentList () {
      const scrollTo = scroller()
      scrollTo('#article-comment-list')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.comment-item {
  flex-wrap: wrap;
}
.comment-item /deep/ .van-cell__value {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  order: 5;
  width: 100%;
  text-align: left;
  padding-left: 0.95rem;
}
.comment-state {
  font-size: 0.2rem;
  font-weight: 300;
  padding: 0.2rem 0;
}
.comment-inners {
  background: #f2f6f9;
  padding: 0.3rem;
}
.comment-inners li {
  font-size: 85%;
}
.comment-inners li span {
  color: #4b608f;
}
</style>
